<template>
  <div>
    <a-input v-model="stateValue" >
      
    </a-input>
    <p>{{ stateValue }}-> lastLetters is {{ inputValueLastLetter }}</p>
    <!-- <a-show :content='inputValue'></a-show> -->
    <p>AppName: {{ appName }}, appNameWithVersion: {{ appNameWithVersion }}</p>
    <p>UserName: {{ userName }}, firstLetter: {{ firstLetter }}</p>
    <button @click='handleChangeAppName'>修改appName</button>
    <p>{{ appVersion }}</p>
    <button @click='changeUserName'>修改用户名</button>
    <button @click='registerModule'>动态注册模块</button>
    <p v-for="(li,index) in todoList" :key='index' >{{ li }}</p>
  </div>
</template>

<script>
import AInput from '_c/AInput.vue'
import AShow from '_c/AShow.vue'
//es6的解构赋值
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
// import { createNamespacedHelpers } from 'vuex'
// const { mapState } = createNamespacedHelpers('user')
export default {
  name: 'store',
  data() {
    return {
      inputValue: ''
    }
  },
  components: {
    AInput,
    AShow
  },
  //es6 的对象展开运算符:  用挂载到计算属性上的方式,把store 中的 state对象  映射到组件中(解构赋值? 来使用)['appName'][把各个属性的数据结构进行扁平化格式化,放到数组中]  , 也可以返回一个对象({appName: state=> state.appName})
  computed: {
    ...mapState({
      // appName: state => state.appName,
      userName: state => state.userName,
      appVersion: state => state.appVersion,
      todoList:  state => state.user.todo ? state.user.todo.todoList : []
    }),
    stateValue: {
      get() {
        return this.$store.state.stateValue
      },
      set(value) {
        this.SET_STATE_VALUE(value)
      }
    },
    ...mapGetters([
      'appNameWithVersion',
      'firstLetter'
    ]),
    appName() {
      return this.$store.state.appName
    },
    userName() {
      return this.$store.state.user.userName
    },
    inputValueLastLetter() {
      return this.inputValue.substr(-1,1)
    },
    appNameWithVersion() {
      return this.$store.getters.appNameWithVersion
    }
  },
  methods: {
    ...mapMutations([
      'SET_APPNAME',
      'SET_USER_NAME',
      'SET_STATE_VALUE'
    ]),
    ...mapActions([
      'updateAppName'
    ]),
    handleInput(val) {
      this.inputValue = val
    },
    handleChangeAppName() {
      // this.$store.commit({
      //   type: 'SET_APPNAME',
      //   appName: 'newAppName'
      // })
      // this.$store.commit({
      //   type: 'SET_APP_VERSION'
      // })
      // this.SET_APPNAME({
      //   appName: 'newAppName'
      // })
      this.updateAppName()
    },
    changeUserName() {
      this.SET_USER_NAME('newUsername')
    },
    registerModule() {
      this.$store.registerModule(['user','todo'],{
        state: {
          todoList: [
            'learn A',
            'learn B',
          ]
        }
      })
    },
    handleStateValueChange(val) {
      this.SET_STATE_VALUE(val)
    }
    
  }
}
</script>

<style>

</style>
